<script setup>
import { computed } from 'vue'
import orderInfo from '@/components/orderInfo.vue'

const props = defineProps({
    user: Object
})

const emit = defineEmits(['changeStatus', 'cencel', 'fahuo'])

const userRole = computed(() => {
    if (props.user.status === -1) return '已注销'

    const is_anchor = props.user.is_anchor
    const is_agent = props.user.is_agent

    let str = ''

    if (!is_anchor && !is_agent) {
        str += '普通用户'
        return str
    }

    if (is_anchor) {
        str += '主播 '
    }

    if (is_agent) {
        str += '推广员 '
    }
    return str
})
</script>

<template>
    <div class="user-item">
        <orderInfo :status="user.status" :nickname="user.order_detail[0].goods_name" :total_amount="user.total_amount"
            :avatar="user.order_detail[0].goods_image" :id="user.user_id" :username="user.order_username"
            :role="userRole"></orderInfo>
        <div class="user-control">
            <!-- <van-switch inactive-color="red" @update:model-value="emit('changeStatus', { id: user.id, status: $event })"
                class="user-control-switch" :model-value="user.status === 1" :disabled="user.status === -1" /> -->
            <template v-if="user.type == 1">
                <van-button size="small" type="primary" v-if="user.is_jj == 1 && (user.status == 2)"
                    @click="emit('cencel', user.id)">取消
                </van-button>
            </template>
            <template v-else>
                <van-button size="small" type="primary" @click="emit('cencel', user.id)">取消
                </van-button>
            </template>
            <van-button style="margin-left: 10px" size="small" type="success" @click="emit('enter')">发货</van-button>
        </div>
        <div class="zhuantau" :class="'zhuantau_' + user.status">{{ user.status == 5 ? '交易关闭' : user.status == 3 ? '待收货' : user.status == 2 ? '待发货' :
      user.status == 1 ? '待支付' : '交易完成' }}</div>
    </div>
</template>

<style scoped lang="less">
.user-item {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user-control {
        display: flex;
        align-items: center;

        .user-control-switch {
            margin-right: 20px;
        }
    }

    
.zhuantau{
    margin-left: 30px;
 &.zhuantau_1 {
    color: #67C23A;
  }

  &.zhuantau_2 {
    color: #E6A23C;
  }

  &.zhuantau_3 {
    color: #F56C6C;
  }

  &.zhuantau_4 {
    color: #909399;
  }

  &.zhuantau_5 {
    color: #409EFF;
  } 
}
}
</style>
